<script>
function delete_article(id, title, url)
{
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		jQuery( "#dialog:ui-dialog" ).dialog( "destroy" );
		jQuery( "#dialog-title" ).html(title);	
		jQuery( "#dialog-modal" ).dialog({
			resizable: false,
			height:140,
			modal: true,			
			buttons: {
				"Yes": function() {
					loading_area('<%= image_tag "loading_ajax.gif" %>', "#article-list", ".style1");
					$( this ).dialog( "close" );
					jQuery.ajax({
					  url: url,
					  type: 'DELETE',
					  success: function (data){
					    jQuery.ajax({
					      url: "<%= request.request_uri %>",
						  data: "format=js"
					    });
					  }
					});
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			}

		});
}

function deleteAllArticles(id, title, url)
{
// alert(JSON.stringify(formToJSON('#mainForm')));

		if (!jQuery('#articles .checkbox').is(':checked'))
		{
			alert("Please select article/articles to delete");
			return false;
		}
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		jQuery( "#dialog:ui-dialog" ).dialog( "destroy" );
		jQuery( "#dialog-title" ).html("Delete all selected articles !!!");	
		jQuery( "#dialog-modal" ).dialog({
			resizable: false,
			height:140,
			modal: true,			
			buttons: {
				"Yes": function() {
					// loading_area('<%= image_tag "loading_ajax.gif" %>');
					$( this ).dialog( "close" );
					//jQuery.ajax({
					//  url: url,
					//  type: 'DELETE',
					//  success: function (data){
					//    jQuery.ajax({
					//      url: "<%= url_for(:controller => 'articles', :format => 'js') %>"
					//    });
					//  }
					//});
					jQuery( "#mainForm" ).submit();
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			}

		});
		
}

</script>




<%= form_tag({:controller => 'articles', :action => 'delete_selected'}, :id => 'mainForm') do %>
                                         
						  
						  
						  

						    <div id="article-list">
						      <table class="style1">

							<thead>
								<tr>
									<th><input type="checkbox" class="checkbox select-all" /></th>
									<th width="25%">Title</th>
									<th class="column_center">Status</th>
									<th>Event</th>
									<th>Channel</th>
									<th>Author</th>
                                                                        <th class="column_center">Ordering</th>
									<th width="10%" class="column_center">Controls</th>
									<th class="column_center">Published</th>
								</tr>
							</thead>
							
							<tbody>
                                                          <% @articles.each do |article| %>                                                            
                                                                <tr id="article_row_<%= article.id %>">
									<td><input type="checkbox" class="checkbox" name="ids[<%= article.id %>]" /></td>
									<td><a href="#"><%= link_to article.title, article %></a></td>
								        <td align="center"><%= article.article_status.nil? ? 'no status' : article.article_status.title %></td>
									<td><%= link_to article.event.title, article.event if !article.event.nil? %></td>
									<td><%= article.channel.title if !article.channel.nil? %></td>
									<td><%= article.user.username if !article.user.nil? %></td>
									<td align="center"><%= article.ordering %></td>
									<td align="center">
                                                                          <%= link_to image_tag("ico_edit_16.png", :border=>0, :class => 'icon16 fl-space2', :title => 'Edit'), edit_article_path(article) %>
                                                                          <span class="delete">
									    <%= image_tag("ico_delete_16.png",
						                                          :border=>0,
											  :class => 'icon16 fl-space2',
											  :title => 'Delete',
											  :onClick => "delete_article(#{article.id}, '#{article.title}', '#{url_for(:controller => 'articles', :id => article.id, :action => 'destroy', :format => :js)}');",
											  :style => "cursor:pointer") %>										
									  </span>
									</td>
									<td align="center">
									  <span id="published_<%= article.id %>" class="published">
									    <%=
									      if article.published
										link_to image_tag("published_on.png", :border=>0, :class => 'icon16 fl-space2', :title => 'Yes'),										      
											    {:id => article.id,										      
											    :action => "published", :format => "js"},
											    :remote => true
									      else
										link_to image_tag("published_off.png", :border=>0, :class => 'icon16 fl-space2', :title => 'No'),										      
											    {:id => article.id,										      
											    :action => "published", :format => "js"},
											    :remote => true
									      end
									    %>
									  </span>									  
									</td>
								</tr>
                                                          <% end %>
                                                          </tbody>
						      </table>
						    </div>
						      
						<div class="tab-footer clear">
                                                  
							<!-- <div class="fl">
								<select name="dropdown" class="fl-space">
									<option value="option1">choose action...</option>
									<option value="option2">Edit</option>
									<option value="option3">Delete</option>

								</select>
								<input type="submit" value="Apply" id="submit2" class="button fl-space" />
							</div> -->
							<div class="tab-footer clear fl">
								<div class="fl">
									<!-- <select class="fl-space" name="action" id="action">
										<option value="option1">choose action...</option>	
										<option value="delete">Delete</option>
									</select> -->
									<input type="button" class="button fl-space" id="submit1" onclick="deleteAllArticles();" value="Delete" title="Delete selected item/items">
								</div>
						        </div>
							
							<div class="dataTables_paginate paging_full_numbers">
							  <%= will_paginate(@articles, :renderer => "PaginationListLinkRenderer") %>
							</div>
							
                                                        <script type="text/javascript">
        
                                                          jQuery(document).ready(function() {
                                                            jQuery('.pagination a').attr('data-remote', 'true');
                                                            jQuery('.pagination a').attr('update', 'dd');
							    jQuery('.pagination a').click(function() {
										      loading_area('<%= image_tag "loading_ajax.gif" %>', "#article-list", ".style1");
										    });
							    
							    jQuery('#articles .checkbox.select-all').click(function() {
										      //alert(jQuery('#articles .checkbox.select-all').is(':checked'));
										      jQuery("#articles .checkbox").attr("checked", jQuery('#articles .checkbox.select-all').is(':checked'));										      
										    });
							    
							    jQuery('.published').click(function() {
										      //alert(jQuery('#articles .checkbox.select-all').is(':checked'));
										      //jQuery('.published').html('<div class="loading"><%= image_tag "loading_ajax.gif" %></div>');
										      this.innerHTML = '<div class="published_loading"><%= image_tag "published_ajax.gif" %></div>';
										    });
							    
							    		    
                                                          });
        
                                                        </script>
							<!-- <div class="pager fr">
								<span class="nav">
									<a href="#" class="first" title="first page"><span>First</span></a>
									<a href="#" class="previous" title="previous page"><span>Previous</span></a>
								</span>

								<span class="pages">
									<a href="#" title="page 1" class="active"><span>1</span></a>
									<a href="#" title="page 2"><span>2</span></a>
									<a href="#" title="page 3"><span>3</span></a>
									<a href="#" title="page 4"><span>4</span></a>
								</span>
								<span class="nav">

									<a href="#" class="next" title="next page"><span>Next</span></a>
									<a href="#" class="last" title="last page"><span>Last</span></a>
								</span>
							</div> -->
						</div>
<% end %>